<template>
    <span
        :title="title"
        class="icon-main"
    >
        <svg
            :class="svgClass"
            v-bind="$attrs"
            fill="orange"
            :style="{ fontSize: size,color: color }"
        >
            <!--<use> 元素从 SVG 文档中获取节点，并在其他地方复制它们-->
            <use :xlink:href="iconName"></use>
        </svg>
    </span>
</template>

<script setup lang="ts" name="vIcon">
/**
 * @description svg图标使用
 * @property {String} title 鼠标指上显示的文字
 * @property {String} name 标题
 * @property {String} color 颜色
 * @property {Boolean} size 图标大小
 * @example  <v-icon name="control_for" size="14" :title="$t('sdms.view')"/>
 * @tips 1、建议不要修改color,设计师给的svg中已经填充了颜色
 * @tips 2、color如果不生效，请把svg原图标里面的fill删除
 * @tips 3、修改样式 请用默认class，'icon-'+ 图片名称
 * @tips 4、修改图标大小用size
 */
const props = defineProps({
    title: {
        type: String,
        default: '',
    },
    name: {
        type: String,
        required: true,
    },
    color: {
        type: String,
        default: '',
    },
    size: {
        type: Number,
        default: 20,
    },
})
const iconName = computed(() => `#icon-${props.name}`)
const svgClass = computed(() => {
    if (props.name) return `svg-icon icon-${props.name}`
    return 'svg-icon'
})
const size = computed(() => props.size || 20)
</script>

<style scoped lang="less">
.icon-main {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    .svg-icon {
        vertical-align: middle;
        width: 1em;
        height: 1em;
        fill: currentColor;
    }
    &:hover {
        color: var(--primary-base);
    }
}
</style>
